<template>
	<view v-if="courseInfo.id">
		<z-nav-bar :title="courseInfo.name" transparentTitle="auto">
			<template v-if="startState == 1" v-slot:right>
				<navigator url="/pages/player/course/course-edit" class="uni-color-main" hover-class="none">
					新增问题
				</navigator>
			</template>
		</z-nav-bar>
		<view v-if="courseInfo.id" class="top-box">
			<view
				v-for="(question, index) in courseInfo.relQuestionSchemeList"
				:key="question.id"
				class="question-item flex_sbc"
				@click="questinIndex = index"
			>
				<view class="u-line-1">
					<text class="uni-color-grey">问题{{ index + 1 }}：</text>
					{{ question.name }}
				</view>
				<view v-if="courseInfo.result[question.id]">
					<view v-if="courseInfo.result[question.id].trainingState" class="uni-C4C7CC flex_sh">已完成</view>
					<view v-else class="uni-orange flex_sh">待训练</view>
				</view>
			</view>
		</view>
		<view v-if="courseInfo.id" class="uni-mt-32">
			<view class="question-box">
				<view class="flex_sbc">
					<view class="z-font-32 text-w">问题{{ questinIndex + 1 }}</view>
					<view class="flex_fsc">
						<view v-if="startState == 1" class="flex_fsc" @click="butFun(0)">
							<image :src="setting.oss_pub_domain + '/app-img/icon/icon_comment.png'" class="icon-size-32"></image>
							<view class="uni-color-main">点评总结</view>
						</view>
						<view v-if="startState == 1" class="flex_fsc uni-ml-40">
							<image :src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'" class="icon-size-32"></image>
							<navigator url="/pages/player/course/course-edit" class="uni-color-main" hover-class="none">
								编辑
							</navigator>
						</view>
					</view>
				</view>
				<view class="uni-585C66 uni-mt-20">{{ itemInfo.name }}</view>
				<view class="uni-color-grey uni-mt-8">
					关联解决方案{{ itemInfo.questionSchemeList ? itemInfo.questionSchemeList.length : 0 }}
				</view>
				<view class="z-font-32 text-w uni-mt-40">描述</view>
				<view class="uni-585C66 uni-mt-12">{{ itemInfo.description }}</view>
				<z-preview-media :srcStr="itemInfo.material"></z-preview-media>
				<view class="z-font-32 text-w uni-mt-40">问题描述</view>
				<view class="uni-mt-24">
					<view v-for="(item, tindex) in itemInfo.descriptionTagName.split(',')" :key="tindex" class="tag-common bg-FBF1EE" :class="{'uni-mt-16': tindex}">{{ item }}</view>
				</view>
				<view v-if="courseInfo.result[itemInfo.id]">
					<view class="z-font-32 text-w uni-mt-40">点评与总结</view>
					<view class="uni-585C66 uni-mt-16" style="line-height: 40rpx">
						<view v-for="(comment, ci) in courseInfo.result[itemInfo.id].summaryComment">
							{{ `${ci + 1}.${comment}` }}
						</view>
					</view>
				</view>
				<navigator v-if="startState == 1" url="/pages/player/course/course-edit" class="add-solution" hover-class="none">添加解决方案</navigator> 
				<view v-if="itemInfo.questionSchemeList && itemInfo.questionSchemeList.length" class="solution-box">
					<view class="z-font-32 text-w">解决方案</view>
					<view v-for="(scheme, si) in itemInfo.questionSchemeList" :key="scheme.id">
						<view class="title flex_sbc">
							<view>{{ si + 1 }}.{{ scheme.name }}</view>
							<!-- <image :src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'" class="icon-size-32"></image> -->
						</view>
						<view class="flex_fsc uni-mt-32">
							<view class="line"></view>
							<view class="z-font-32">指导教学</view>
						</view>
						<view class="uni-585C66 uni-mt-12">{{ scheme.description }}</view>
						<z-preview-media :srcStr="scheme.material"></z-preview-media>
						<view v-if="courseInfo.result[itemInfo.id]">
							<view class="flex_fsc uni-mt-60">
								<view class="line"></view>
								<view class="z-font-32">训练要点</view>
							</view>
							
							<view class="uni-585C66 uni-mt-16 uni-ml-26" style="line-height: 40rpx">
								<view v-for="(comment, ci) in courseInfo.result[itemInfo.id].trainingPoints[scheme.id]" :key="comment">
									{{ `${ci + 1}.${comment}` }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <image :src="setting.oss_pub_domain + '/app-img/icon/icon-camera.png'" class="add-icon"></image> -->
		<bottom-box
			v-if="courseInfo.result[courseInfo.relQuestionSchemeList[questinIndex].id] && !courseInfo.result[courseInfo.relQuestionSchemeList[questinIndex].id].trainingState && startState == 1"
			:buts="buts"
			@change="butFun"
		></bottom-box>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog
				type="warning"
				cancelText="取消"
				confirmText="确定"
				title="提示"
				:content="`确定已经完成“${courseInfo.relQuestionSchemeList[questinIndex].name}”的训练了吗？`"
				@confirm="dialogConfirm"
			></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
import { editCoursePlan } from '@/api/player.js';
import { appointmentGiveLessonsDetail, getOpenCourseDetail } from '@/api/course';
import { courseOnlyStuDetail } from "@/api/student.js"
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, computed } from 'vue';
const { proxy: that } = getCurrentInstance(),
	startState = uni.getStorageSync('start-state');

let questinIndex = ref(0),
	courseInfo = reactive({}),
	playerInfo;
onLoad((opt) => {
	questinIndex.value = parseInt(opt.index || 0);
});

const itemInfo = computed(() => {
	return courseInfo.relQuestionSchemeList[questinIndex.value];
});

onShow(() => {
	const info = uni.getStorageSync('edit-course')
	const funName = info.openCourse ? getOpenCourseDetail : info.studentSide ? courseOnlyStuDetail : appointmentGiveLessonsDetail;
	funName(info.id).then(res => {
		Object.assign(courseInfo, res);
		courseInfo.result = JSON.parse(courseInfo.result || '{}')
		uni.setStorageSync('edit-course', courseInfo)
		console.log(courseInfo);
	})
	playerInfo = uni.getStorageSync('player-info');
});

const alertDialog = ref();
function dialogConfirm() {
	courseInfo.result[courseInfo.relQuestionSchemeList[questinIndex.value].id].trainingState = true;
	editCoursePlan({ result: JSON.stringify(courseInfo.result), stuId: playerInfo.id, type: 0 }, courseInfo.id)
		.then((res) => {
			that.tools.alert(`问题${questinIndex.value + 1}已完成训练`);
			uni.setStorageSync('edit-course', courseInfo);
			uni.navigateBack()
		})
		.catch(() => {
			courseInfo.result[courseInfo.relQuestionSchemeList[questinIndex.value].id].trainingState = false;
		});
}
const buts = [
	{
		label: '训练点评',
		bgColor: 'uni-orange-bg',
		width: 300
	},
	{
		label: '完成训练',
		bgColor: 'uni-color-main-bg',
		width: 300
	}
];

function butFun(e) {
	if (e) {
		alertDialog.value.open();
	} else {
		uni.navigateTo({
			url: '/pages/course/question-details/comment-gist/comment-gist?index=' + questinIndex.value
		});
	}
}

const videoUrl = ref('');
</script>
<style>
page {
	background: linear-gradient(to bottom, #eae9f9 0, #eae9f9 1000rpx, #f5f5f5 1000rpx, #f5f5f5);
}
</style>
<style lang="scss">
@import 'question-details.scss';
</style>
